<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName('/data-retrieval/index')">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item to="/data-retrieval/list">检索列表</ask-breadcrumb-item>
                <ask-breadcrumb-item>编辑</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <page-search>
            <page-search-column class="fixed-column">
                <page-search-item class="left">
                    <div class="title">
                        <div class="name">{{ $route.query.title }}</div>
                        <div class="only-word" v-if="onlyWord">
                            唯一性<span class="tips">(多条唯一性时，满足1个即可，唯一性必填)</span>：<span class="word" :title="onlyWord">{{ onlyWord }}</span>
                        </div>
                    </div>
                </page-search-item>
                <page-search-item class="right">
                    <el-button @click="save()" type="primary" size="mini">保存</el-button>
                    <el-button @click="goBack" size="mini">取消</el-button>
                </page-search-item>
            </page-search-column>
        </page-search>
        <preview-template
            :formList="formList"
            ref="previewTemplate"
            :key="key"
            :disabledIdList="onlyIdList"
            v-if="show"
        ></preview-template>
    </page-box>
</template>

<script lang="ts">
import { Component, Provide, Vue } from "vue-property-decorator";
import PreviewTemplate from "@/views/module-manage/src/components/preview-template/index.vue";

@Component({
    name: "DeclareFillInNotAlive",
    components: {
        PreviewTemplate
    }
})
export default class DeclareFillIn extends Vue {
    key = 0;

    @Provide("dataForm")
    dataForm() {
        return this._dataForm;
    }

    _dataForm: any = {
        items: []
    };

    show = false;
    onlyWord = ""
    formList: any[] = []
    onlyIdList: any[] = []

    created() {
        if (this.$route.query.currentId) {
            this.getFormItem();
            this.getOnlyWord();
        }
    }

    async getOnlyWord() {
        const res = await this.$server["business/getOnly"]({
            data: {
                typeId: this.$route.query.currentId
            }
        });
        if (res.data.code === 200) {
            const list: any[] = res.data.data.map((item: any) => item.map((it: any) => it.labelName));
            this.onlyWord = list.map((item: any, index: number) => (index + 1) + "." + item.join("+")).join(" ");
            this.onlyIdList = [];
            res.data.data.forEach((item: any) => {
                item.forEach((it: any) => {
                    this.onlyIdList.push(it.labelId);
                });
            });
        } else {
            this.onlyWord = "";
        }
    }

    async getFormItem() {
        const res = await this.$server["retrieval/getFormItem"]({
            data: {
                secondTypeId: this.$route.query.currentId
            }
        });
        if (res.data.code === 200) {
            this.formList = [];
            res.data.data.forEach((item: any) => {
                const obj: any = {
                    itemType: 0,
                    items: [],
                    name: item.typeName
                };
                item.labelList.forEach((it: any) => {
                    obj.items.push({
                        name: it.name,
                        itemType: 2,
                        id: item.typeField + it.field, // 适应组件回显逻辑用的id
                        valueKindId: it.valueKindId,
                        unitKindId: it.unitKindId,
                        unitKindName: it.unitKindName,
                        options: it.optionList,
                        resId: it.id // 原数据id
                    });
                });
                this.formList.push(obj);
            });
            if (this.$route.query.id) {
                this.getDetailsInfo();
            } else {
                this.show = true;
            }
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 获取详情
    async getDetailsInfo() {
        const res = await this.$server["retrieval/detailsInfo"]({
            data: {
                dataId: this.$route.query.id,
                field: this.$route.query.currentFiled,
                parentId: this.$route.query.currentId,
                typeId: this.$route.query.currentId
            }
        });
        if (res.data.code === 200) {
            if (res.data.data) {
                this._dataForm = { items: [] };
                res.data.data.forEach((item: any) => {
                    item.dataList.forEach((it: any) => {
                        if (["1", "2", "3", "6", "7", "11", "12"].includes(it.valueKindId)) {
                            this._dataForm.items.push({
                                itemId: item.field + it.en,
                                itemValue: it.valueData
                            });
                        } else if (it.valueKindId === '4') {
                            this._dataForm.items.push({
                                itemId: item.field + it.en,
                                extData: it.valueData || {},
                                data: it.valueData
                            });
                        } else if (["5", "8", "9", "10"].includes(it.valueKindId)) {
                            this._dataForm.items.push({
                                itemId: item.field + it.en,
                                extData: it.valueData || [],
                                data: it.valueData
                            });
                        } else {
                            this._dataForm.items.push({
                                itemId: item.field + it.en,
                                extData: it.valueData,
                                data: it.valueData
                            });
                        }
                    });
                });
            }
            this.show = true;
        }
    }

    async save() {
        const itemValueList: any[] = [];
        this.formList.forEach((item: any) => {
            item.items.forEach((it: any) => {
                if (["1", "2", "3", "6", "7", "11", "12"].includes(it.valueKindId)) {
                    itemValueList.push({
                        extData: null,
                        itemValue: it.itemValue,
                        labelId: it.resId
                    });
                } else {
                    itemValueList.push({
                        extData: it.extData,
                        itemValue: null,
                        labelId: it.resId
                    });
                }
            });
        });
        const res = await this.$server["retrieval/saveData"]({
            data: {
                itemValueList,
                secondTypeId: this.$route.query.currentId
            }
        });
        if (res.data.code === 200) {
            this.$message.success("本次修改将于5分钟后生效，请届时查看！");
            setTimeout(() => {
                this.goBack();
            }, 500);
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    goBack() {
        this.$router.back();
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: #edeff2 !important;
        height: calc(100% - 50px) !important;
    }
    .preview-template-container {
        height: calc(100% - 60px);
        background: #fff;
        overflow-y: auto;
    }
    .pbb__search-column.fixed-column {
        padding: 10px 18px;
        height: 50px !important;
    }
}
.fixed-column {
    .title {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 36px;
    }
    .name {
        font-size: 16px;
        margin-right: 20px;
    }
    .only-word {
        padding: 0 20px;
        line-height: 30px;
        font-size: 14px;
        max-width: 700px;
        @include textEllipsis();
        .tips {
            color: #888;
            font-size: 12px;
        }
    }
    .btn {
        font-size: 14px;
        color: #2c82c9;
        cursor: pointer;
        padding: 0;
        margin: 0;
        &:hover {
            text-decoration: underline;
        }
    }
}

.rich-dialog {
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 10px 20px;
            .titleName {
                font-size: 16px;
                padding: 0;
                margin: 0 0 10px 0;
            }
            .content {
                max-height: 600px;
                overflow-y: scroll;
            }
        }
    }
}
</style>
